<?php 
		 
 
	 $sql = "SELECT
				
				coor,
				label
			FROM
				map
		   ";
			$result = query($sql);
			




head('Карта');



?>

  
        <div style="width:100%">
<a class="city"  onclick="initialize('42.506200', '27.465012',13); return false;">Бургас</a>
<a class="city"  onclick="initialize('43.216477', '27.911323',13); return false;">Варна</a>        
<a class="city"  onclick="initialize(42.141384, 24.749286,13); return false;">Провдив</a>
<a class="city"  onclick="initialize(43.841654, 25.967777,13); return false;">Русе</a>
<a class="city"  onclick="initialize(42.685717, 23.316050,12); return false;">София</a>
<a class="city"  onclick="initialize(42.425306, 25.634732,13); return false;">Стара Загора</a>

</div>
        <div id="netmap"  style=" width:100%; height:650px; clear:both;">
        </div>
       
<br style="clear:both" />



<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    
var latitude = 42.771923;
var longitude = 25.112352;
var zoom =  7;    
 function initialize(lat,lon,zm) {
	 
        var latitude = lat, 
            longitude = lon,
            radius = 80000, //how is this set up
            center = new google.maps.LatLng(latitude,longitude),
            //bounds = new google.maps.Circle({center: center, radius: radius}).getBounds(),
            mapOptions = {
                center: center,
                zoom: zm,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: true
            };

        var map = new google.maps.Map(document.getElementById("netmap"), mapOptions);

        setMarkers(center, radius, map);
    }

    function setMarkers(center, radius, map) {
        var json = (function () { 
            var json = null; 
			
			<?php 
			echo "var data = '{ \"values\": [' + ";
			$json = '';
			while ($row = mysql_fetch_object($result)) {
			 
				$coor = explode(",", $row->coor);
				$title = str_replace(array("\r","\n",'\r','\n'),'<br>', $row->label);
				$title = str_replace('<br><br>','<br>', $title);
				$json .= "
				'{\"latitude\" : \"".$coor[0]."\",\"longitude\" : \"".$coor[1]."\",\"title\" : \"".$title."\" },' +";
	
			}
			
			$json = substr($json,0,-4);
			
			
			
			$json .= " ] }';";
			
			echo  $json;
			?>
			
			
			
			json = JSON.parse(data);
			
			//json = data.values;
			
           
			
			
			
            return json.values;
        })();

        

        //loop between each of the json elements
        for (var i = 0, length = json.length; i < length; i++) {
			
            var data = json[i],
            latLng = new google.maps.LatLng(data.latitude, data.longitude); 



            
                // Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: data.title
                });
                infoBox(map, marker, data);
           
        }

        circle.bindTo('center', marker, 'position');
    }

    function infoBox(map, marker, data) {
        var infoWindow = new google.maps.InfoWindow();
        // Attaching a click event to the current marker
        google.maps.event.addListener(marker, "click", function(e) {
            infoWindow.setContent(getContent(data));
            infoWindow.open(map, marker);
        });

        // Creating a closure to retain the correct data 
        // Note how I pass the current data in the loop into the closure (marker, data)
        (function(marker, data) {
          // Attaching a click event to the current marker
          google.maps.event.addListener(marker, "click", function(e) {
            infoWindow.setContent(getContent(data));
            infoWindow.open(map, marker);
          });
        })(marker, data);
    }
	
	function getContent(data){
		var content = '<b>'+data.title+'<b>';
		return content;
	}
   
   
   google.maps.event.addDomListener(window, 'load', initialize(latitude,longitude,zoom));

    
    

	
</script>

<?php
foot('home');
?>